<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0;}
        /*.head{
            background:gray;
        }
        .body{
            background:pink;
        }*/
        /*table{border-collapse: collapse;}*/
    </style>
</head>
<body>
<div id="table">
</div>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script>
    var json=[
            {"title":"111","info0":"1","info1":"2","info2":"3","info3":"4","info4":"5","info5":"6","info6":"7","info7":"8","info8":"9","info9":"10"},
            {"title":"22","info0":"1","info1":"2","info2":"3","info3":"4","info4":"5","info5":"6","info6":"7","info7":"8","info8":"9","info9":"10"},
            {"title":"33","info0":"3","info1":"3","info2":"3","info3":"3","info4":"3","info5":"3","info6":"3","info7":"3","info8":"3","info9":"3"},
            {"title":"44","info0":"4","info1":"4","info2":"4","info3":"4","info4":"4","info5":"4","info6":"4","info7":"4","info8":"4","info9":"4"},
            {"title":"55","info0":"5","info1":"5","info2":"5","info3":"5","info4":"5","info5":"5","info6":"5","info7":"5","info8":"5","info9":"5"},
            {"title":"66","info0":"6","info1":"6","info2":"6","info3":"6","info4":"6","info5":"6","info6":"6","info7":"6","info8":"6","info9":"6"},
            {"title":"77","info0":"7","info1":"7","info2":"7","info3":"7","info4":"7","info5":"7","info6":"7","info7":"7","info8":"7","info9":"7"},
            {"title":"88","info0":"8","info1":"8","info2":"8","info3":"8","info4":"8","info5":"8","info6":"8","info7":"8","info8":"8","info9":"8"},
            {"title":"99","info0":"9","info1":"9","info2":"9","info3":"9","info4":"9","info5":"9","info6":"9","info7":"9","info8":"9","info9":"9"},
            {"title":"100","info0":"10","info1":"10","info2":"10","info3":"10","info4":"10","info5":"10","info6":"10","info7":"10","info8":"10","info9":"10"}
            ];
    function  table(json,clientW,clientH,cellW,cellH) {
        /*$("table").css({"borderCollapse":"collapse"})*/
        clientW=clientW||"500px";
        clientH=clientH||"234px";
        cellW=cellW||"90px";
        cellH=cellH||"24px"
        /*alert(clientW)*/
        var trLength=0;
        for(var i in json[0]){
            trLength++;
        }
        /*alert(trLength)*/
        var tWidth=json.length*parseInt(cellW);
        /*alert(tWidth)*/
        var $Table=$("#table");
        /*alert($Table.attr("id"))*/
        $Table.css({
            width:clientW,
            position:"ralative"
        }).append("<div class='head'></div><div class='body'></div>");
        var $tHead=$(".head");
        var $tBody=$(".body");
        $tHead.css({width:clientW,height:cellH,position:"absolute",overflow:"hidden",left:0,top:0});
        $tBody.css({width:clientW,height:clientH,position:"absolute",overflow:"auto",left:0,top:cellH});
        $tHead.append("<table class='h-table'></table>");
        $(".h-table").append("<thead><tr></tr></thead>").css({position:"absolute",left:0,top:0,width:tWidth});
        /*$(".h-table thead").append("");*/
        var $hTr=$(".h-table tr");
        for(var i=0;i<json.length;i++){
            $hTr.append("<th>"+json[i].title+"</th>")
        }
        var insideW=parseInt(cellW)-2+"px"
        var insideH=parseInt(cellH)-2+"px"
        $(".h-table th").css({width:insideW,border:"1px solid black",height:insideH,lineHeight:insideH,textAlign:"center"})
        $tBody.append("<table class='b-table'></table>");
        $(".b-table").append("<tbody></tbody>").css("width",tWidth);
        var $bTbody=$(".b-table tbody");
        for(var i=0;i<trLength-1;i++){
            $bTbody.append("<tr></tr>")
        }
        var $bTr=$(".b-table tr");
        for(var i=0;i<trLength-1;i++){
            for(var j=0;j<json.length;j++){
                $bTr.eq(i).append("<td>"+json[j]["info"+i]+"</td>");
            }
        }
        $(".b-table td").css({width:insideW,border:"1px solid black",height:insideH,lineHeight:insideH,textAlign:"center"})
        /*$(".h-table").css({position:"absolute",left:0,top:0,width:tWidth})*/
        /*alert($tBody.get(0).className)*/
        $tBody.get(0).onscroll=function(){
            /*alert(1)*/
            $(".h-table").get(0).style.left=$tBody.get(0).scrollLeft*-1 +'px'
        }
        document.getElementsByClassName("h-table")[0].style.borderCollapse="collapse";
        document.getElementsByClassName("b-table")[0].style.borderCollapse="collapse";
    }
    table(json,"400px","300px","50px","30px")
    console.log(1)
</script>
</html>